<template>
    <div id="repair">
        <div class="headerDiv">
            <div class="listCellDiv" @click="clickArea">
            <div class="leftDiv">
                <span class="title">报修区域</span>
                <div class="rightDiv">
                        <span v-bind:class="{subtitle:true,hasContent:areaHasContent,noContent:!areaHasContent}"
                              v-model="area" v-show="!repairAreaId">{{areaGroup}}</span>
                    <span v-bind:class="{areaSubTitle:true,hasContent:areaHasContent,noContent:!areaHasContent}"
                          v-model="area" v-show="repairAreaId">{{area}}</span>

                </div>

            </div>

            <img :src="rightArrow" class="rightarrow"/>
        </div>

            <div :class="{listCellDiv:true,listCellDivNoButtomPadding:addressCellShowBottomPadding}" @click="addressDivClick">
                <div class="leftDiv">
                    <span class="title">报修地址</span>
                    <van-field rows="1" autosize placeholder="请输入报修地址" class="vanField" v-model="address"
                               type="textarea"
                               ref="focusVantField"
                               input-align="right"/>
                    <!--<input autosize placeholder="请输入报修地址" class="subtitle" v-model="address"/>-->

                </div>
            </div>

            <div class="listCellDiv listCellNoBottom" @click="phoneDivClick">
                <div class="leftDiv">
                    <span class="title">联系方式</span>
                    <input ref="focusPhoneInput" placeholder="请输入手机号" class="subtitle" v-model="phone" />
                </div>
            </div>
        </div>
        <!--<div class="middleDiv">-->
        <!--<div class="listCellDiv">-->
        <!--<div class="leftDiv">-->
        <!--<span class="title">报修类型</span>-->

        <!--<div class="rightDivColumn" @click="clickPepairType">-->
        <!--<span class="subtitle noContent" v-show="selectType === '' ">请选择报修类型</span>-->
        <!--<span class="subtitle" v-show="selectType !== '' ">{{selectType}}</span>-->
        <!--<span class="subtitle" v-show="selectType !== '' ">{{selectContent}}</span>-->
        <!--</div>-->
        <!--</div>-->

        <!--<img :src="rightArrow" class="rightarrow" />-->
        <!--</div>-->

        <!--<div class="listCellDiv listCellNoBottom">-->
        <!--<div class="leftDiv">-->
        <!--<span class="title">单位/价格</span>-->

        <!--<div class="rightDivRow">-->
        <!--<span class="subtitle noContent" v-show="selectType === '' ">请填写单位</span>-->
        <!--<input placeholder="请填写" v-model="number" type="number" class="subtitle" v-show="selectType !== '' "/>-->
        <!--<span class="subtitle" style="margin-left: 1rem" v-show="selectType !== '' ">{{selectPriceContent}}</span>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <div class="bottomDiv">
            <div class="bottomTitle">问题描述</div>
            <textarea
                    class="textarea"
                    placeholder="请描述一下您的问题,限制在100字以内"
                    v-model="remark"
                    maxlength="100"
                    ref="focusTextarea"
                    @blur="fixScroll"
            >
      </textarea>

            <div>
                <div class="tagTitle">点击标签快捷输入</div>
                <div class="tagDiv">
                    <div class="tagItem" v-for="tagStr in tagList" @click.stop="tagClick(tagStr)">{{tagStr}}</div>
                </div>
            </div>

            <div class="redText">提示：维修师傅上门检查，将产生50元上门费用。</div>

            <div class="bottomTitle">请上传图片</div>


            <!--<div class="uploadDivNoinput">-->
            <!--<van-uploader  v-model="fileList" multiple :max-count="3" :after-read="afterRead" :before-delete="beforeDelete">-->
            <!--&lt;!&ndash;<van-button icon="photo" type="primary">上传图片</van-button>&ndash;&gt;-->

            <!--<div class="cameraDiv" @click="chooseImg">-->
            <!--<img :src="camera" class="cameraImg"/>-->
            <!--<div class="cameraTitle">{{ imageStr }}</div>-->
            <!--</div>-->
            <!--</van-uploader>-->
            <!--</div>-->

            <van-uploader v-model="fileList" multiple :max-count="3" :before-read="beforeRead" :after-read="afterRead"
                          :before-delete="beforeDelete">
                <!--<van-button icon="photo" type="primary">上传图片</van-button>-->

                <div class="cameraDiv">
                    <img :src="camera" class="cameraImg"/>
                    <div class="cameraTitle">{{ imageStr }}</div>
                </div>
            </van-uploader>


        </div>
        <div class="submitOrderDiv">
            <!--<div class="submitOrderTitleDiv">-->
            <!--<div class="yugu">预估:</div>-->
            <!--<div class="y">¥</div>-->
            <!--<div class="price">{{totalPrice}}</div>-->
            <!--</div>-->

            <div class="button" @click="submit">提交</div>
        </div>

        <SelectAreaPopup title="报修区域" v-bind:showArea="showArea" :closeArea="closeArea"
                         :selectItem="selectItem"></SelectAreaPopup>
        <SelectRepairTypePopup title="报修服务" v-bind:showArea="showPepairTyp" :closeArea="closePepairType"
                               :selectItem="selectPepairType"></SelectRepairTypePopup>
        <!--<SelectRepairTypePopup title="报修服务" v-bind:typeArray="typeArray" v-bind:showArea="showPepairTyp" :closeArea="closePepairType" :selectItem="selectPepairType"></SelectRepairTypePopup>-->
    </div>
</template>

<script>
    import SelectAreaPopup from './components/SelectAreaPopup'
    import SelectRepairTypePopup from './components/SelectRepairTypePopup'
    import {isPhoneNum, addImagePrefix, removeImagePrefix, isWeixinBrowser} from "@/utils/utils";
    import {api_repairCreate} from '@/service/api/repair'
    import {api_upLoad} from '@/service/api/upLoad'
    import wx from 'weixin-js-sdk'

    let vm = null;

    export default {
        name: "Repair",
        data() {
            return {
                rightArrow: require("@/images/icon/order/right_arrow.png"),
                camera: require("@/images/icon/order/camera.png"),
                areaGroup: '请选择报修区域',
                area: '请选择报修区域',
                address: '',
                phone: '',
                repairType: '请选择报修类型',
                showArea: false,
                showPepairTyp: false,
                selectType: '',
                selectContent: '',
                selectPriceContent: '',
                selectPrice: 0,
                number: null,
                repairTypeId: '',
                repairContentId: '',
                repairAreaId: '',
                repairAreaGroup: '',
                remark: '',
                tagList: ["插座类故障", "灯坏了", "开关故障", "门锁故障", "桌椅损坏", "水龙头漏水", "空调故障"],
                // 是否正在请求报修
                inRequest: false,
                // 文件上传列表
                fileList: [],
                urlfileList: []
            };
        },
        computed: {
            addressCellShowBottomPadding() {
                if (this.address) {
                    return false;
                }
                return true;
            },

            imageStr() {
                console.log(this.fileList);

                if (this.fileList.length == 0) {
                    return "添加图片";
                } else if (this.fileList.length == 1) {
                    return "1/3";
                } else if (this.fileList.length == 2) {
                    return "2/3";
                } else {
                    return "图片上限";
                }
            },
            areaHasContent() {
                if (this.area === '请选择报修区域') {
                    return false;
                }
                return true;
            },
            repairTypeHasContent() {
                if (this.repairType === '请选择报修类型') {
                    return false;
                }
                return true;
            },
            totalPrice() {
                return this.number * this.selectPrice;
            }

        },
        methods: {
            fixScroll() {

                let u = navigator.userAgent;

                let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

                if (isiOS) {

                    window.scrollTo(0, 0);

                }

            },
           phoneDivClick(){
               this.$refs.focusPhoneInput.focus();

           },
            addressDivClick(){
                this.$refs.focusVantField.focus();

            },
            tagClick(item) {
                this.$refs.focusTextarea.focus();
                var tempStr = "";

                if (this.remark) {
                    tempStr = this.remark + " " + item;
                } else {
                    tempStr = item;
                }

                if (tempStr.length > 100) {
                    this.$toast("不能超过100个字符");
                    return;
                } else {
                    this.remark = tempStr;
                }

            },
            chooseImg(e) {
                console.log("chooseImg" + JSON.stringify(e) + e.target);
                return true;
            },
            beforeRead(){
                this.$toast.loading(
                    {
                        duration:0,
                        message:'图片读取中'
                    }
                );
                return true;
            },
            afterRead(files) {
// urlfileList 确保列表中都显示的是 远程图片  filelist中会默认添加本地图片 所以要覆盖一下

                this.$toast.loading(
                    {
                        duration:5000,
                        message:'图片上传中'
                    }
                );

                if (files instanceof Array) {
                    for (var i = 0; i < files.length; i++) {
                        var file = files[i];
                        api_upLoad(file.file).then((res) => {
                            vm.urlfileList.push({url: addImagePrefix(res.data.url)});
                            vm.fileList = this.urlfileList;
                        }).catch((error) => {
                            vm.fileList = this.urlfileList;
                            vm.$toast(error.message);
                        });
                    }
                } else {
                    api_upLoad(files.file).then((res) => {
                        vm.urlfileList.push({url: addImagePrefix(res.data.url)});
                        vm.fileList = this.urlfileList;
                    }).catch((error) => {
                        vm.fileList = this.urlfileList;
                        vm.$toast(error.message);
                    });
                }
            },

            beforeDelete(file) {
                for (var i = 0; i < this.urlfileList.length; i++) {
                    var fileUrl = this.urlfileList[i].url;
                    if (fileUrl === file.url) {
                        this.urlfileList.splice(i, 1);
                        this.fileList = this.urlfileList;
                        return;
                    }
                }

            },
            clickArea() {
                this.showArea = true;
            },
            closeArea() {
                this.showArea = false;
            },
            selectItem(result) {
                // var group = result.groupItem;
                // this.areaGroup = group.groupName;
                // this.repairAreaGroup = group.id;

                var item = result.areaItem;
                this.area = item.areaName;
                this.repairAreaId = item.id;

                this.showArea = false;
            },
            clickPepairType() {
                this.showPepairTyp = true;
            },
            closePepairType() {
                this.showPepairTyp = false;
            },
            selectPepairType(item) {

                this.selectType = item.typeItem.name;
                this.selectContent = item.contentItem.name;
                this.selectPriceContent = item.contentItem.price + '/' + item.contentItem.unit;
                this.selectPrice = item.contentItem.price;

                this.repairTypeId = item.typeItem.id;
                this.repairContentId = item.contentItem.id;

                this.showPepairTyp = false;
            },
            submit() {

                if (this.inRequest) {
                    this.$toast("正在报修请稍后");
                    return;
                }

                if (this.repairAreaId === '') {
                    this.$toast('请选择报修区域');
                    return;
                }
                if (this.address === '') {
                    this.$toast('请填写报修地址');
                    return;
                }
                if (!isPhoneNum(this.phone)) {
                    this.$toast('请填写正确的手机号');
                    return;
                }

                if (!this.remark) {
                    this.$toast('请填写问题描述');
                    return;
                }

                // if (this.repairTypeId === ''){
                //     this.$toast('请选择报修类型');
                //     return;
                // }
                // if (this.repairContentId === ''){
                //     this.$toast('请选择报修内容');
                //     return;
                // }

                // if (this.number <= 0){
                //     this.$toast('请输入数量');
                //     return;
                // }


                // if (this.fileList.length < 1){
                //     this.$toast('请上传图片');
                //     return;
                // }

                var urlList = '';
                for (var i = 0; i < this.fileList.length; i++) {
                    var file = this.fileList[i];
                    console.log(file.url);
                    if (i == 0) {
                        urlList += removeImagePrefix(file.url);
                    } else {
                        urlList = urlList + ',' + removeImagePrefix(file.url);
                    }
                }

                let data = {
                    repairAreaId: this.repairAreaId,
                    address: this.address,
                    mobile: this.phone,
                    // repairTypeId: this.repairTypeId,
                    // repairContentId: this.repairContentId,
                    // amount: this.number,
                    repairInfo: this.remark,
                    imgUrls: urlList
                };

                this.inRequest = true;
                api_repairCreate(data).then((res) => {
                    // this.$toast('订单创建成功')
                    // this.$router.back();
                    this.inRequest = false;
                    this.$router.push({name: "repairSuccessPage"});
                }).catch(() => {
                    this.inRequest = false;
                });

            }
        },
        components: {
            SelectAreaPopup,
            SelectRepairTypePopup
        },
        created() {
            vm = this;
        }

    };
</script>

<style scoped>
    #repair {
        position: relative;
        top: 0;
        left: 0;
        /*right: 0;*/
        /*bottom: 0;*/
        width: 100%;
        height: 100%;
        z-index: 200;
        overflow: auto;
        background-color: #F6F8FB;
    }

    .headerDiv {
        padding: 0 20px;
        width: 100%;
        background-color: white;
    }

    .middleDiv {
        background-color: white;

        padding: 0 20px;
        width: 100%;
        margin-top: 0.8rem;
    }

    .bottomDiv {
        background-color: white;
        padding: 0 20px;
        margin-top: 0.8rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 10rem;
        /*align-items: center;*/
    }

    .listCellDiv {
        border-bottom: 0.5px solid #f0f1f5;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        padding: 1.3rem 0;
    }

    .listCellDivNoButtomPadding {

        padding-bottom: 1px;
    }

    .listCellNoBottom {
        border-bottom: 0.5px solid white;

    }

    .leftDiv {
        width: 95%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .rightDiv {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: flex-end;
    }

    .rightDivColumn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
    }

    .rightDivRow {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }

    .title {
        height: 0.95rem;
        font-size: 0.95rem;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: rgba(18, 28, 50, 1);
        line-height: 0.95rem;
        flex-shrink: 0;
    }

    .subtitle {
        height: 1.1rem;
        font-size: 0.9rem;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: rgba(122, 132, 145, 1);
        line-height: 0.95rem;

    }

    .areaSubTitle {
        font-size: 0.9rem;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: rgba(122, 132, 145, 1);
        line-height: 0.95rem;
        text-align: right;
    }

    .rightarrow {
        width: 0.43333333333333335rem;
        height: 0.7333333333333333rem;
        margin-bottom: 0.2rem;
    }

    .bottomTitle {
        margin: 1rem 0;
        height: 1.4rem;
        font-size: 1rem;
        font-family: PingFangSC-Medium, PingFangSC;
        font-weight: 500;
        color: rgba(18, 28, 50, 1);
        line-height: 1.4rem;
    }

    .cameraDiv {
        width: 5rem;
        height: 5rem;
        background: rgba(255, 255, 255, 1);
        border-radius: 0.26666666666666666rem;
        border: 1px solid rgba(240, 241, 245, 1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .cameraImg {
        width: 1.0666666666666667rem;
        height: 1.0666666666666667rem;
        margin-bottom: 0.3333333333333333rem;
    }

    .cameraTitle {
        margin-top: 0.3333333333333333rem;
        height: 1.1rem;
        font-size: 0.8rem;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: rgba(191, 195, 205, 1);
        line-height: 1.1rem;
    }

    .submitOrderDiv {
        background-color: white;
        padding: 0 20px;
        width: 100%;
        height: 4.2666666666666666rem;

        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 200;
        overflow: auto;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

    }

    .submitOrderTitleDiv {
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: flex-end;
    }

    .yugu {
        width: 2.4rem;
        height: 1.1rem;
        font-size: 0.8rem;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: rgba(122, 132, 145, 1);
        line-height: 1.1rem;
    }

    .y {
        width: 0.4666666666666667rem;
        height: 1.2rem;
        font-size: 1.2rem;
        font-family: DINCondensed-Bold, DINCondensed;
        font-weight: bold;
        color: rgba(242, 62, 84, 1);
        line-height: 1.2rem;
    }

    .price {
        width: 2.2333333333333334rem;
        height: 2rem;
        font-size: 2rem;
        font-family: DINCondensed-Bold, DINCondensed;
        font-weight: bold;
        color: rgba(242, 62, 84, 1);
        line-height: 2.4rem;
    }

    .button {
        width: 10.333333333333334rem;
        height: 2.6666666666666665rem;
        background: #397be6;
        border-radius: 1.6333333333333333rem;
        color: white;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    textarea {
        height: 7.0rem;
        width: 100%;
        background-color: #f6f8fb;
        padding: 1rem;

        font-size: 0.8666666666666667rem;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: #7a8491;

        line-height: 1.2333333333333334rem;
    }

    textarea::-webkit-input-placeholder {
        height: 2.466666666666667rem;
        font-size: 0.8666666666666667rem;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: rgba(191, 195, 205, 1);
        line-height: 1.2333333333333334rem;
    }

    textarea::-moz-placeholder {
        height: 2.466666666666667rem;
        font-size: 0.8666666666666667rem;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: rgba(191, 195, 205, 1);
        line-height: 1.2333333333333334rem;
    }

    textarea:-ms-input-placeholder {
        height: 2.466666666666667rem;
        font-size: 0.8666666666666667rem;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: rgba(191, 195, 205, 1);
        line-height: 1.2333333333333334rem;
    }

    input {
        text-align: right;
    }

    input::-webkit-input-placeholder {
        color: #bfc3cd;
    }

    input::-moz-placeholder {
        color: #bfc3cd;
    }

    input::-ms-input-placeholder {
        color: #bfc3cd;
    }

    .noContent {
        color: #bfc3cd;
    }

    .hasContent {
        color: rgba(122, 132, 145, 1);
    }

    .redText {
        height: 1.1rem;
        font-size: 0.8rem;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: rgba(242, 62, 84, 1);
        line-height: 1.1rem;

        margin-top: 1.5rem;
    }

    .vanField {
        /*font-size: 0.9rem;*/
        /*font-family: PingFangSC-Regular, PingFangSC;*/
        /*font-weight: 400;*/
        /*line-height: 0.95rem;*/
        /*text-align: right;*/

    }

    .leftDiv >>> .van-cell {
        padding: 0;
        padding-left: 20px;
    }

    .leftDiv >>> textarea {
        font-size: 0.8666666666666667rem;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: #7a8491;

        line-height: 1.2333333333333334rem;
    }

    .leftDiv >>> textarea::-webkit-input-placeholder {
        font-size: 0.8666666666666667rem;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: rgba(191, 195, 205, 1);
        line-height: 1.2333333333333334rem;
    }

    .leftDiv >>> textarea::-moz-placeholder {
        font-size: 0.8666666666666667rem;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: rgba(191, 195, 205, 1);
        line-height: 1.2333333333333334rem;
    }

    .leftDiv >>> textarea:-ms-input-placeholder {
        font-size: 0.8666666666666667rem;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: rgba(191, 195, 205, 1);
        line-height: 1.2333333333333334rem;
    }

    .uploadDivNoinput {

    }

    .uploadDivNoinput >>> input {
        display: none;
    }

    .tagTitle {
        height: 1.2333333333333334rem;
        font-size: 0.8666666666666667rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(191, 195, 205, 1);
        line-height: 1.2333333333333334rem;
        margin-top: 0.5rem;
    }

    .tagDiv {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .tagItem {
        font-size: 0.8333333333333334rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(122, 132, 145, 1);
        line-height: 1.2rem;

        padding: 0.3rem 0.5rem;
        margin-right: 0.46rem;
        margin-top: 0.5rem;

        background-color: #F0F1F5;
    }

</style>
